<template>
    <div class>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="dialogVisible = true" type="primary">发送短信</el-button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table :data="tableData" border height="65vh" style="width: 100%">
                    <el-table-column prop="ID" label="ID" width="120"></el-table-column>
                    <el-table-column prop="username" label="用户名称" width="160"></el-table-column>
                    <el-table-column prop="phonenum" label="手机号码" width="160"></el-table-column>
                    <el-table-column prop="state" label="发送状态" width="160" :formatter="({ state }) => state ? '成功' : '失败'">

                    </el-table-column>
                    <el-table-column prop="createdAt" width="160" sortable="custom"
                        :formatter="({ createdAt }) => TimeYH(createdAt)" label="发布时间"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange"
                    :page-size="Number(formquery._limit)" layout="prev, pager, next" :total="count"></el-pagination>
            </div>
        </div>
        <el-dialog title="短信通知" v-model="dialogVisible" width="800">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择短信模板">
                    <el-select v-model="ruleForm.codeid">
                        <el-option value="SMS_232166744" label="OJ-账号开通通知"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户">
                    <el-radio v-model="isAdmin" label="5" size="default">全部成员</el-radio>
                    <el-radio v-model="isAdmin" label="0" size="default">学生</el-radio>
                    <el-radio v-model="isAdmin" label="2" size="default">教师</el-radio>
                    <el-radio v-model="isAdmin" label="1" size="default">管理员</el-radio>
                    <el-radio v-model="isAdmin" label="3" size="default">创建者</el-radio>
                    <el-radio v-model="isAdmin" label="4" size="default">指定人员</el-radio>
                </el-form-item>
                <el-form-item v-if="ruleForm.isAdmin == 4" label="选择人员">
                    <el-select-v2 :style="{ width: '200px' }" v-model="ruleForm.userid" :options="getusers" filterable
                        multiple></el-select-v2>
                </el-form-item>
                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { OptionType } from 'element-plus/lib/components/select-v2/src/select.types';
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { asynccreatedsms, asyncselectsms, Iobj } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH } from '../../../util/time'

const dialogVisible = ref(false)

const prop = defineProps<{ ID: number | string, team: Studycodemodel.Iteam, teamusers: Studycodemodel.Iteamuser[] }>()

const formquery = reactive<Iobj<Studycodemodel.Isms>>({
    _offset: 0,
    _limit: 20
})

const isAdmin = ref(0)


function change(e: any) {
    ruleForm.isAdmin = e
}

const getusers = computed<OptionType[]>(() => {
    return [{ value: Number(prop.team.userid), label: String(prop.team.user?.name) }].concat(...prop.teamusers.map(e => { return { value: Number(e.user?.ID), label: String(e.user?.name) } }))
})


const ruleForm = reactive<any>({
    teamid: prop.ID,
    userid: [],
    codeid: 'SMS_232166744',
    isAdmin: 0
})

const tableData = ref<Studycodemodel.Isms[]>([])
const count = ref(0)
async function start() {
    formquery.teamid = prop.ID
    const data = await asyncselectsms(formquery)
    tableData.value = data.rows
    count.value = data.count
}

function handleCurrentChange(val: number) {
    formquery._offset = Number(formquery._limit) * (val - 1);
}

async function submit() {
    await asynccreatedsms(ruleForm)
    dialogVisible.value = false
    start();
}

watch(formquery, e => {
    start()
})

watch(() => isAdmin.value, (v) => {
    if (v == 3) {
        ruleForm.userid = [prop.team.userid]
    } else if (v == 5) {
        ruleForm.userid = getusers.value.map(e => e.value)
    }

    else {
        ruleForm.userid = []
        ruleForm.isAdmin = v
    }
})


onMounted(() => {
    start()
})



</script>

<style scoped></style>